<template>
  <div>
    <div :id="id" :style="style"></div>
  </div>
</template>

<script>
export default {
  name: 'Pie2',
  data () {
    return {
      // echarts实例
      pie2: ''
    }
  },
  props: {
    // 父组件需要传递的参数：id，width，height，option
    id: {
      type: String
    },
    width: {
      default: '100%',
      type: String
    },
    height: {
      default: '100%',
      type: String
    },
    pieData: [{
      name: '水路运输',
      value: 4947289.9
    },
    {
      name: '铁路运输',
      value: 58478.1
    },
    {
      name: '公路运输',
      value: 1108923.3
    },
    {
      name: '航空运输',
      value: 1166309.8
    },
    {
      name: '邮件运输',
      value: 394.8
    },
    {
      name: '其它运输',
      value: 108465.2
    }],
    option: {
      type: Object,
      // Object类型的prop值一定要用函数return出来，不然会报错。原理和data是一样的，
      // 使用闭包保证一个vue实例拥有自己的一份props
      default () {
        return {
          title: {
            // text: '2020年1-4月港口吞吐量情况',
            // fontColor: '#FFF'
          },
          legend: {
            itemWidth: 20,
            itemHeight: 10,
            right: 50
          },
          tooltip: {},
          series: [{
            name: '',
            type: 'pie',
            center: ['50%', '60%'],
            radius: ['75%', '0%'],
            label: {
              position: 'inner',
              fontSize: 11
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: [{
              name: '水路运输',
              value: 100.99
            },
            {
              name: '铁路运输',
              value: 100.99
            },
            {
              name: '公路运输',
              value: 100.99
            },
            {
              name: '航空运输',
              value: 100.99
            },
            {
              name: '邮件运输',
              value: 100.99
            },
            {
              name: '其它运输',
              value: 100.99
            }]
          }]
        }
      }
    }
  },
  computed: {
    style () {
      return {
        height: this.height,
        width: this.width
      }
    }
  },
  created () {
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.chart = this.$echarts.init(document.getElementById(this.id))
      this.chart.setOption(this.option)
    }
  }
}
</script>

<style scoped>

</style>
